<!--
 * @Description: 名师 -- top—teacher
 * @Author: your name
 * @Date: 2023-12-22
 * @LastEditTime: 2023-12-22
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="top_teacher heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '' }">师资团队</el-breadcrumb-item>
        <el-breadcrumb-item>师资简介</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="container_content">
        <div class="container_content_message">
          <el-image
            src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/bf724202109221708402367.jpg"
            alt="晴老师"
          ></el-image>
          <div class="content_message_value">
            <h3>Francis</h3>
            <ul class="meg_cont">
              <li>CFA/FRM/CFP持证人</li>
              <li>中级经济师</li>
              <li>11年教学经验</li>
            </ul>
            <p>
              累计培训学员超30000人次。
              主导并且参与《CFA一级中文精读》、《CFA核心金融词汇》、《FRM一级中文教材》等图书教材编写工作。
              治学态度严谨，用思维的逻辑力量吸引学生的注意力，帮助学生快速梳理知识架构。
              先后从事CFP国际金融理财师系列、中级经济师、银行内训、FRM®金融风险管理师、CFA®特许金融分析师等培训工作。
              曾担任多家银行金融培训讲师，并担任大赛评委等工作。
              主讲科目：CFA：企业发行人、权益投资、固定收益、衍生品、另类投资等科目；FRM：市场风险计量和管理、信用风险计量和管理、风险管理和投资管理等科目。
            </p>
          </div>
        </div>
      </div>

      <!-- tabs栏 -->
      <div class="container_selectTap">
        <div class="selectTap_item">
          <div class="selectTap_tip" :style="{ left: select_val + 'px' }">
            <img
              src="http://zhishifufei.crmeb.net/pc/images/select.png"
              alt=""
            />
          </div>
          <div
            :class="{ selectTap: true, selectEd: rankId == index }"
            v-for="(item, index) in tabsList"
            :key="item.tid"
            @click="tabsTitles(index, item)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="tab-main">
        <!-- 1. 简介 -->
        <div class="detail" v-if="baseId_img == '简介'">
          <p>123</p>
        </div>
        <!-- 2. 资料 -->
        <!-- <div class="material" v-if="baseId_img == '资料'">
          <el-empty :image-size="200"></el-empty>
        </div> -->
        <!-- 3. 专题 -->
        <!-- <div class="special" v-if="baseId_img == '专题'">
          <el-empty :image-size="200"></el-empty>
        </div> -->
        <!-- 4. 活动 -->
        <!-- <div class="activity" v-if="baseId_img == '活动'">
          <el-empty :image-size="200"></el-empty>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top_teacher',
  data() {
    return {
      select_val: 0,
      rankId: 0,
      baseId_img: '简介',
      tabsList: [
        {
          name: '简介',
          tid: 113
        }
        // {
        //   name: '资料',
        //   tid: 116
        // },
        // {
        //   name: '专题',
        //   tid: 118
        // },
        // {
        //   name: '活动',
        //   tid: 120
        // }
      ]
    }
  },
  created() {},
  methods: {
    tabsTitles(index, item) {
      this.rankId = index
      this.select_val = 113 * index
      this.baseId_img = item.name
    }
  }
}
</script>

<style scoped lang="scss">
.el-breadcrumb {
  margin: 30px 0 20px;
}

.container_content {
  padding: 30px;
  padding-right: 53px;
  background-color: #fff;
  margin-bottom: 30px;
}

.container_content_message {
  display: flex;
  .el-image {
    width: 300px;
    height: 300px;
    margin-right: 40px;
    border-radius: 8px;
  }
}

.content_message_value {
  flex: 1;

  .meg_cont {
    padding-left: 18px;
    li {
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 30px;
      letter-spacing: 0px;
      color: #4c4c4c;
      list-style: disc;
    }
  }

  p {
    width: 813px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #4c4c4c;
    margin-top: 10px;
  }

  h3 {
    font-size: 36px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #4c4c4c;
  }
}

/* tabs栏 */
.container_selectTap {
  display: flex;
  margin-bottom: 10px;
  position: relative;
  height: 56px;
  border-radius: 2px;
  background-color: #fff;
  align-items: center;
}

.selectTap_item {
  display: flex;
  align-items: center;
  flex: 1;

  & > div:not(:last-child) {
    border-right: 1px solid #d9d9d9;
  }

  .selectTap {
    width: 113px;
    font-size: 14px;
    color: #282828;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
}

.selectTap_tip {
  position: absolute;
  top: 0;
  left: 0;
  width: 113px;
  transition: 0.3s;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.tab-main {
  margin: 10px 0 70px;
}

/* 简介 */
.detail {
  padding: 30px;
  background-color: #ffffff;
  line-height: 1.5;
}

/* 资料 */
.material {
  background-color: #ffffff;
}

/* 专题 */
.special {
  padding: 30px;
  background-color: #ffffff;

  .el-empty {
    padding: 190px 0;
    background-color: #ffffff;
  }
}

.activity {
  padding: 0 30px;
  background-color: #ffffff;
}
</style>
